<template>
  <div class="mt-1">
    <van-form>
      <h4 style="margin: 0 0 0.2rem 1rem; color: gray">
        当前产区:{{ this.$store.getters.productionLine }}
      </h4>
      <van-field
        v-model="code"
        clearable
        ref="pmfocus"
        @focus="stopKeyborad"
        label="拍码"
        placeholder="请输入拍码"
        class="pmstyle"
      />
      <van-popup
        v-model="show"
        position="bottom"
        :style="{ height: '100%' }"
        class="aaa"
      >
        <div class="titlefont">明细数据</div>
        <div class="content">
          <div v-if="this.rowData.length > 0">
            <van-cell title="物料号" :value="this.rowData[0].ProductId" />
            <van-cell title="物料名称" :value="this.rowData[0].ProductName" />
            <van-cell title="拍号" :value="this.rowData[0].UniqueId" />
            <van-cell title="供应商名称" :value="this.rowData[0].Supplier" />
            <van-cell title="生产商名称" :value="this.rowData[0].Producer" />
          </div>
          <div v-for="(item, index) in this.rowData" :key="index">
            <van-cell-group
              inset
              style="margin: 0.5rem"
              border
              class="groupstyle"
            >
              <div v-if="item.State == '已投料'">
                <van-cell title="投料状态" :value="item.State" />
                <van-cell title="批次" :value="item.BatchNO" />
                <van-cell title="数量" :value="item.allNum" />
                <div v-if="item.Rer03 != null">
                  <van-cell title="箱码" :value="item.Rer03" />
                </div>
              </div>
              <div v-if="item.State == '未投料'">
                <van-cell title="投料状态" :value="item.State" />
                <van-cell title="批次" :value="item.BatchNo" />
                <van-cell title="数量" :value="item.StockQuantity" />
                <div v-if="item.Rer03 != null">
                  <van-cell title="箱码" :value="item.Rer03" />
                </div>
              </div>
            </van-cell-group>
          </div>
          <div v-if="this.rowData.length > 0">
            <van-cell title="单位" :value="this.rowData[0].Unit" />
            <van-cell
              title="生产日期"
              :value="this.rowData[0].ProductionDate.substring(0, 10)"
            />
            <van-cell
              title="有效期"
              :value="this.rowData[0].ExpDate.substring(0, 10)"
            />
            <van-cell
              title="产线-库位"
              :value="this.rowData[0].WareHouseName"
            />
          </div>
        </div>
        <van-row type="flex" justify="center">
          <van-button
            block
            type="info"
            @click="submit"
            size="normal"
            class="buttomStyle"
            >确 认</van-button
          >
        </van-row>
      </van-popup>
      <audio src="../../assets/warning.mp3" preload="auto" id="bgMusic"></audio>
    </van-form>
  </div>
</template>

<script>
import { CODE_LENGTH } from "../../config";
import { parseQRCode, toast } from "../../utils/common";
import { SerachList, getFedData } from "../../api/feeding";

export default {
  name: "WIP",
  data() {
    return {
      code: "",
      savenum: "",
      allnum: null,
      rowData: [],
      show: false,
    };
  },
  watch: {
    code(val) {
      if (val.length > CODE_LENGTH) {
        let res = parseQRCode(val);
        if (res) {
          if (res.SerialNo) {
            this.findPat(res.palletNo, res.SerialNo);
            this.$refs.pmfocus.$refs.input.setAttribute("readonly", "readonly");
          } else {
            this.findPat(res.palletNo);
            this.$refs.pmfocus.$refs.input.setAttribute("readonly", "readonly");
          }
          //this.$refs.pmfocus.focus();
        } else {
          this.playMusic();
          toast("无法识别");
        }
      }
      this.code = "";
    },
  },
  methods: {
    // 消除获取焦点时自动弹出键盘
    stopKeyborad() {
      this.$refs.pmfocus.$refs.input.setAttribute("readonly", "readonly");
      setTimeout(() => {
        this.$refs.pmfocus.$refs.input.removeAttribute("readonly");
      }, 200);
    },
    //播放警示音
    playMusic() {
      setTimeout(() => {
        let audio = document.getElementById("bgMusic");
        audio.play();
      }, 200);
    },
    //从外界添加数据
    async findPat(palletNo, SerialNo) {
      let productionline = this.$store.getters.productionLine;
      let res = "";
      if (!SerialNo) {
        res = await SerachList(
          productionline,
          palletNo,
          this.$store.getters.WarehouseId
        );
      }
      let resover = await getFedData(
        productionline,
        palletNo,
        this.$store.getters.WarehouseId,
        SerialNo
      );
      console.log(res);
      console.log(resover);
      if (
        (res && res.Status == 200 && res.Data) ||
        (resover && resover.Status == 200 && resover.Data.length != 0)
      ) {
        if (res.Data) {
          console.log(res.Data);
          res.Data.State = "未投料";
          this.rowData.push(res.Data);
          console.log(this.rowData);
          this.show = true;
        }
        if (resover.Data.length > 0) {
          console.log(resover.Data);
          resover.Data.map((it) => {
            this.allnum += Number(it.Num);
          });
          resover.Data[0].State = "已投料";
          if (!SerialNo) {
            resover.Data[0].Rer03 = null;
          }
          resover.Data[0].allNum = this.allnum;
          this.rowData.push(resover.Data[0]);
          console.log(this.rowData);
          this.show = true;
        }
      } else {
        this.playMusic();
        toast("未查找此数据");
        this.$refs.pmfocus.$refs.input.removeAttribute("readonly");
        //this.$refs.pmfocus.focus();
      }
    },
    submit() {
      this.show = false;
      this.rowData = [];
      this.allnum = 0;
      this.$refs.pmfocus.$refs.input.removeAttribute("readonly");
      this.$refs.pmfocus.focus();
    },
  },
  mounted() {
    this.$refs.pmfocus.focus();
  },
};
</script>
<style scoped>
.titlefont {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: inherit;
  text-align: center;
  font-size: 1.1rem;
  color: blueviolet;
  height: 1.6rem;
  margin-top: 0.1rem;
  background-color: white;
}
.content {
  margin-top: 2rem;
}
.buttomStyle {
  position: fixed;
  bottom: 1.5rem;
}
.van-cell {
  padding: 4px 16px;
}
.groupstyle {
  border: 1px solid rgb(221, 88, 88);
  border-radius: 2px;
}
.pmstyle {
  padding: 10px 16px;
}
</style>